<div mat-dialog-content>
	<table
		[dataSource]="processList"
		[trackBy]="identify"
		mat-table>

		<ng-container matColumnDef="pid">
			<th *matHeaderCellDef mat-header-cell style="min-width: 50px"> PID</th>
			<td *matCellDef="let element" mat-cell> {{ element.pid }}</td>
		</ng-container>

		<ng-container matColumnDef="db">
			<th *matHeaderCellDef mat-header-cell style="min-width: 50px"> DB</th>
			<td *matCellDef="let element" mat-cell> {{ element.db }}</td>
		</ng-container>

		<ng-container matColumnDef="duration">
			<th *matHeaderCellDef mat-header-cell style="min-width: 60px"> Duration</th>
			<td *matCellDef="let element"
				mat-cell> {{ (element.duration / 1000) - (element.duration / 1000) % 1 | number }}
			</td>
		</ng-container>

		<ng-container matColumnDef="query">
			<th *matHeaderCellDef mat-header-cell style="width: 100%">
				<mat-form-field appearance="legacy" class="searchField" style="width: 100%; margin-bottom: -1.25em">
					<input
						#filter
						(keyup)="filterChanged(filter.value)"
						autocomplete="off"
						matInput
						placeholder="Filter process">
					<button
						(click)="filter.value=''; filterChanged(filter.value)"
						*ngIf="filter.value"
						aria-label="Clear"
						mat-icon-button
						matSuffix>
						<span class="material-symbols-outlined notranslate">close</span>
					</button>
				</mat-form-field>
			</th>
			<td *matCellDef="let element" mat-cell> {{ element.query }}</td>
		</ng-container>

		<ng-container matColumnDef="kill">
			<th *matHeaderCellDef mat-header-cell>
				<button
					aria-label="close dialog"
					mat-dialog-close
					mat-icon-button
					style="position: absolute; top: 6px; right: 6px">
					<span class="material-symbols-outlined notranslate">close</span>
				</button>
			</th>
			<td *matCellDef="let element" mat-cell>
				<button
					(click)="kill(element.pid)"
					color="warn" mat-icon-button>
					<span class="material-symbols-outlined notranslate">
						stop_circle
					</span>
				</button>
			</td>
		</ng-container>

		<tr *matHeaderRowDef="displayedColumns; sticky: true" cdkDrag cdkDragHandle
			cdkDragRootElement=".cdk-overlay-pane" mat-header-row></tr>
		<tr *matRowDef="let row; columns: displayedColumns;" mat-row
			style="background-color: rgba(0, 0, 0, 0.25);"></tr>
	</table>
</div>

